<style>
    .ly-markdown code {
        border: 1px solid #C0CCDA;
        background: #f6f6f6;
        padding: 2px 5px;
        margin: 0 2px;
        border-radius: 5px;
    }

    blockquote {
        margin-left: 0;
        border-left: 4px solid #ddd;
        color: #5e6d82;
        padding:  15px;
        background-color: #F9FAFC;
        margin-right: 0;
    }

    blockquote p {
        margin: 0;
    }

    .ly-markdown ul {
        padding-left: 20px;
    }

    .ly-markdown ol {
        padding-left: 20px;
    }

    .ly-markdown ul li {
        line-height: 28px;
        list-style: disc;
    }

    .ly-markdown ol li {
        line-height: 28px;
        list-style: decimal;
    }

    .ly-markdown h4 {
        border-left: 2px solid var(--primary);
        padding-left: 10px;
    }
    .ly-markdown-warp{
        margin-bottom: 10px;
    }

</style>
<template>
    <div class="ly-markdown-warp" >
        <div ref="code" style="display: none;">
            <slot>
            </slot>
        </div>
        <div class="ly-markdown" v-html="rawHtml">
        </div>
    </div>
</template>
<script>

    Rap.define('', '', function () {
        function parseHtml(html) {
            html = html.replace(/\r\n/g, '\n');
            var lines=html.split('\n');
            var text='';
            var is_code_end=true;
            _.each(lines,function (line) {
                if(line.trim().indexOf('~~~')==0){
                    is_code_end=!is_code_end;
                }
                if(is_code_end){
                    text+=line.trim()+'\r\n';
                }else{
                    text+=line+'\r\n';
                }
            });
            html = marked(text);
            html = html.replace(/<p>&gt;/g, "<p class='blockquote'>");
            html = html.replace(/<table>/g, "<table class='ly-table ly-table-border'>");
            var doc = new DOMParser().parseFromString(html, 'text/html');
            var pres = doc.getElementsByTagName('pre');
            //处理代码显示
            for (var i = 0; i < pres.length; i++) {
                var pre = pres[i];
                var code = pre.firstChild.innerHTML;
                code = code.replace(/=""/g, "");
                code = code.replace(/v-on:/g, "@");

                code = code.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
                        .replace(/</g, '&lt;').replace(/>/g, '&gt;').replace('/-->/g', '--&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');

                code = code.replace(/\r\n/g, '</li><li>').replace(/\n/g, '</li><li>');
                code = ' <div class="ly-code-pre"> <h3 class="ly-code-h3">code</h3> <pre> <ol class="ly-code-ol"  ><li>' + code + '</li></ol></pre> </div>';
                pre.outerHTML = code;
            }
            //处理blockquote
            var blockquotes = doc.getElementsByClassName('blockquote');
            for (i = 0; i < blockquotes.length; i++) {
                var blockquote = blockquotes[i];
                html = blockquote.outerHTML;
                html = html.replace(/&gt;/g, '').replace(/\r\n/g, '</p><p>').replace(/\n/g, '</p><p>');
                blockquote.outerHTML = "<blockquote>" + html + "</blockquote>";
            }
            return doc.body.innerHTML;
        }

        return {
            name: 'ly-markdown',
            props: {
                value: {}
            },
            watch: {
                'value': function (val) {
                    this.rawHtml = parseHtml(val);
                }
            },
            data: function () {
                return {
                    rawHtml: ''
                }
            },
            created: function () {
                if (this.value) {
                    this.rawHtml = parseHtml(this.value);
                }
            },
            methods: {},
            mounted: function () {
                if (!this.$refs.code.firstChild) {
                    return;
                }
                var html = this.$refs.code.firstChild.innerHTML;
                this.rawHtml = parseHtml(html);
            }
        }
    });

</script>